در این قسمت میخوام یک کد ( Animated Boatin ) جالب رو در اختیارتون بذارم.

همونطور که دیدین یک قایق زیبا بصورت انیمیشنی قرار داده شده و میتونین از نحوه کد نویسی اون ایده بگیرید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این قسمت میخوام یک کد ( Animated cube slider ) جالب رو در اختیارتون بذارم.

همونطور که دیدین یک اسلایدر بصورت مکعبی قرار داده شده و با استفاده از CSS ساخته شده است.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

به نام خدا و سلام. در خدمت شما هستیم با جلسه 59 ام از دوره مجازی آموزش طراحی قالب حرفه ای وردپرس. در این جلسه قصد داریم تایید کردن پرداخت کاربر هنگام برگشت از درگاه یانک را آموزش دهیم. در ابتدا تابعی برای تایید پرداخت کاربر خواهیم نوشت و سپس در صفحه پرداخت که کاربر را به درگاه بانک منتقل کرده بودیم از این تابع استفاده خواهیم کرد و مبلغ پرداخت شده کاربر را با استفاده از تابع Verify_Request تایید خواهیم کرد در صورت تایید درگاه بانک کاربر وجه را به صورت موفق پرداخت کرده است و ما رکورد دیتابیس را به صورت تایید شده به روز رسانی می کنیم در غیر این صورت پیغام خطا را به کاربر نشان خواهیم داد. در این جلسه خواهیم دید :

• پیاده سازی تابع تایید پرداخت درگاه آسان پرداخت
• استفاده از این تابع در صفحه مربوطه درگاه آسان پرداخت
• به روز رسانی دیتابیس و تغییر وضعیت پرداخت کاربر

توضیحات : بعد از درخواست های فراوان دوستان برای برگزاری دوره آموزش طراحی قالب وردپرس به صورت حرفه ای و تلاش سون لرن برای انجام مقدمات برگزاری دوره بالاخره انتظار ها به پایان رسید.در این دوره یک قالب حرفه ای و مردن با افکت های زیبا را به همراه کد نویسی بهینه و هم چنین امکانات متعدد یک وب سایت دانلود و آموزش را با هم پیاده سازی خواهیم کرد.برای راحتی کار دوره به سه بخش کلی تقسیم شده که بخش اول طراحی قالب در فتوشاپ - بخش دوم تبدیل قالب طراحی شده به HTML و CSS و بخش سوم هم پیاده سازی قالب با امکانات حرفه ای در وردپرس هست.چنانچه قبلا در دوره های دیگر سون لرن شرکت کرده اید این دوره علاوه بر آموزش کامل وردپرس تمرینی بسیار حرفه ای برای شما خواهد بود و هم اکنون با محتوایی غنی تر و حرفه ای تر و قیمتی بسیار کمتر از آن چه در دوره های حضوری وجود دارد می توانید در آن ثبت نام کنید !

- - , .

در این قسمت میخوام یک کد ( Animated Thumbs Up ) جالب رو در اختیارتون بذارم.

همونطور که دیدین بصورت انیمیشنی یک دست رو قرار داده و تعداد Share رو نمایش میده. میتونین از این کد ایده بگیرید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون آموزش داده شده که چطور با راهنمایی و اشاره کردن به منابع مختلف Performance سایتتون رو بالاتر ببرید و به سرعت لود اون کمک کنید. یکی از مواردی که در مورد اون بحث میشه dns-prefetch هست که به مرورگر میفهمونه که این DNS رو بیاد داشته باشه و مدت زمان کمتری طول بکشه تا به اون وصل شه.

برای شروع وارد سایت Precognitive-Pages بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این جلسه ادامه بحث بهینه سازی داخلی سایت یا on-Page Seo رو ادامه خواهیم داد... مطالب مطرح شده در این جلسه عبارتند از :

• بهنیه سازی لینک های داخلی سایت
• تاثیر نام دامین و پسوند آن بر سئو
• تاثیر ساب دامین و ساب فولدر بر سئو
• تاثیر پارک دامین روی سئو
• نسبت متن به کد
• infinite scrolling
• ایندکس چیست و راه های افزایش سرعت آن
• نرخ بروزرسانی سایت
• over optimization
• و...

ویدیو در حال رندر و آپلود می باشد...

توضیحات : Seo مخفف Search Engine Optimization به معنای بهینه سازی سایت برای موتور های جستجو می باشد. با توجه به درخواست های بالای کاربران ، مبنی بر برگزاری دوره سئو و همچنین نیاز به برگزاری یک دوره جامع برای آشنایی بیشتر وبمستران با بحث سئو ، برآن شدیم که یکی از دوره های سایت سون لرن را به مبحث SEO اختصاص دهیم. شما اگر بهترین برنامه نویس ، بهترین طراح رابط کاربری باشید و یا به طور کلی صاحب بهترین سایت هم که باشید ، تا زمانی که با بحث SEO آشنایی نداشته باشید نمیتوانید در سطح اینترنت خدمات ، کالا یا ... را به مخاطبانتان معرفی کنید یا به فروش برسانید. بنابرین سئو یک مبحث ضروری برای تمامی وبمستران و طراحان وب سایت می باشد که بایستی با آن آشنایی داشته باشند. متاسفانه بسیاری از طراحان وب و وبمسترها باورهای اشتباهی در رابطه با سئو دارند که باعث میشود این مبحث را یک چیز ساده یا برعکس یه چیز خیلی پیچیده بدانند. آیا میزان سئوی وب سایت خودتان رو براساس ابزار های آنالیز سئو تشخیص میدهید؟ آیا سئوی سایت خود را در طراحی قالب سایت خود می بینید؟ آیا سئوی سایت را در قرار دادن لینک خود در سایت های دیگر می بینید ؟ آیا سئو سایت را در نصب افزونه های موجود برای CMS های خود میدانید؟ بسیاری از سوالات این چنینی ممکن است ذهن شما را درگیر کرده باشد! در این دوره شما با پاسخ این سوالات و نحوه برخورد صحیح با آن ها آشنا خواهید شد. باید بدانید که سئو محدود به یک زمینه خاص نیست ، سئو ؛ ترکیبی از علم ، هنر و خلاقیت است. ما در این دوره سعی می کنیم به صورت جامع شما را با مفاهیم سئو به دور از اغراق و کاملا صادقانه آشنا کنیم تا خودتان بهینه ساز سایت خودتان باشید. امید است این دوره نیز برای شما دوستان گرامی مفید واقع گردد.

- - , .

در این قسمت میخوام یک کد ( Canvas Fireworks ) جالب رو در اختیارتون بذارم.

همونطور که دیدین یک حالت آتش بازی قرار داده شده و هر جا که کلیک کنید یک مورد جدید بوجود میاد و با حالتی زیبا به پایان میرسه. میتونین از این کد ایده بگیرید و برای زیبایی سایتتون از اون استفاده کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این قسمت میخوام یک کد ( Animated Weather Icons ) جالب رو در اختیارتون بذارم.

همونطور که دیدین تعدادی آیکون انیمیشنی برای آب و هوا قرار داده شده و میتونین از اونا استفاده کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک قالب زیبا برای ایمیل قرار داده شده و میتونین اونو بصورت رایگان دانلود کرده و استفاده کنید.

برای شروع وارد سایت passion بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این قسمت میخوام یک کد ( Confettis Generator ) جالب رو در اختیارتون بذارم.

همونطور که دیدین یک افکت زیبای پخش کاغذ رنگی قرار داده شده و میتونین تنظیمان اون رو متناسب با سلیقتون عوض کنید. مثلا میتونین تعداد ذرات رو بیشتر کنید و یا اینکه جاذبه رو بیشتر کنید و ...

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون 20 آیکون مربوط به دریا قرار داده شده و میتونین بصورت رایگان اونا رو دانلود کرده و استفاده کنید. این آیکون ها در سایز 90 پیکسل موجود هستن.

برای شروع وارد سایت sea-elements-icons بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که میتونین با استفاده از اون بسادگی گرادیانهای مورد نظر خودتون رو بسازید. روند کار به این صورت هست که در ابتدا یک رنگ از سمت چپ و رنگ دیگری رو در سمت راست انتخاب میکنید و بعد از اون بر روی دکمه وسط کلیک میکنید. با اینکار یک گرادیان تشکیل میشه و میتونین کدهای اون رو بردارید و استفاده کنید. میتونید با جابجا کردن اون دکمه وسط هم بر گرادیان کنترل داشته باشید.

برای شروع وارد سایت blend بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این قسمت میخوام یک کد ( CSS Flat Building ) جالب رو در اختیارتون بزارم.

همونطور که دیدین یک ساختمان بصورت انیمیشنی با استفاده از CSS ساخته شده و میتونین از اون ایده بگیرید. هر بار که انیمیشن به پایان میرسه میتونین دوباره اونو از اول شروع کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این قسمت میخوام یک کد ( Construction Machine ) جالب رو در اختیارتون بذارم.

همونطور که دیدین در اون یک ماشین کشاورزی رو با استفاده از CSS درست کرده و حالت انیمیشنی به اون داده.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این جلسه 14 از فصل بهینه سازی داخلی سایت (on-page seo) به بهینه سازی محتوای متنی می پردازیم. مواردی که در این جلسه بهش پرداخته میشه شامل بهینه سازی تگ title ، بهینه سازی متن محتوا ، بهینه سازی URL و مطالب دیگه ای مرتبط به بهینه سازی داخل سایت است که خدمت شما عزیزان خواهیم گفت. مطالب مطرح شده در این جلسه عبارتند از :

• بهینه سازی محتوای متنی
• بهینه سازی تگ عنوان
• بهنیه سازی متن مطالب سایت
• بهینه سازی آدرس مطالب

توضیحات : Seo مخفف Search Engine Optimization به معنای بهینه سازی سایت برای موتور های جستجو می باشد. با توجه به درخواست های بالای کاربران ، مبنی بر برگزاری دوره سئو و همچنین نیاز به برگزاری یک دوره جامع برای آشنایی بیشتر وبمستران با بحث سئو ، برآن شدیم که یکی از دوره های سایت سون لرن را به مبحث SEO اختصاص دهیم. شما اگر بهترین برنامه نویس ، بهترین طراح رابط کاربری باشید و یا به طور کلی صاحب بهترین سایت هم که باشید ، تا زمانی که با بحث SEO آشنایی نداشته باشید نمیتوانید در سطح اینترنت خدمات ، کالا یا ... را به مخاطبانتان معرفی کنید یا به فروش برسانید. بنابرین سئو یک مبحث ضروری برای تمامی وبمستران و طراحان وب سایت می باشد که بایستی با آن آشنایی داشته باشند. متاسفانه بسیاری از طراحان وب و وبمسترها باورهای اشتباهی در رابطه با سئو دارند که باعث میشود این مبحث را یک چیز ساده یا برعکس یه چیز خیلی پیچیده بدانند. آیا میزان سئوی وب سایت خودتان رو براساس ابزار های آنالیز سئو تشخیص میدهید؟ آیا سئوی سایت خود را در طراحی قالب سایت خود می بینید؟ آیا سئوی سایت را در قرار دادن لینک خود در سایت های دیگر می بینید ؟ آیا سئو سایت را در نصب افزونه های موجود برای CMS های خود میدانید؟ بسیاری از سوالات این چنینی ممکن است ذهن شما را درگیر کرده باشد! در این دوره شما با پاسخ این سوالات و نحوه برخورد صحیح با آن ها آشنا خواهید شد. باید بدانید که سئو محدود به یک زمینه خاص نیست ، سئو ؛ ترکیبی از علم ، هنر و خلاقیت است. ما در این دوره سعی می کنیم به صورت جامع شما را با مفاهیم سئو به دور از اغراق و کاملا صادقانه آشنا کنیم تا خودتان بهینه ساز سایت خودتان باشید. امید است این دوره نیز برای شما دوستان گرامی مفید واقع گردد.

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون آزمونی برای EcmaScript 6 قرار داده شده و میتونین از اون استفاده کنید و دانش خودتون رو بسنجید. برای جابجا شدن بین صفحات از کلیدهای سمت راست و چپ صفحه کلید استفاده کنید.

برای شروع وارد سایت es6-quiz بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این قسمت میخوام یک کد ( Cute Owl ) جالب رو در اختیارتون بذارم.

همونطور که دیدین ظاهر یک جغد با استفاده از CSS ساخته شده و میتونین از اون ایده بگیرید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که سایتی زیبا و دیدنی است و میتونین از اون ایده بگیرید.

برای شروع وارد سایت nlee بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون 20 آیکون در سایز 100 پیکسل قرار داده شده و میتونین بصورت رایگان اونا رو دانلود کرده و استفاده کنید.

برای شروع وارد سایت halloween-icons بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این قسمت میخوام یک کد ( Floaty fluttery rainbow stars ) جالب رو در اختیارتون بزارم.

همونطور که دیدین افکتی زیبا با استفاده از ستاره ها درست شده و میتونین از اون در سایتتون استفاده کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این قسمت میخوام یک کد ( Foo Particles Four ) جالب رو در اختیارتون بزارم.

همونطور که دیدین که در اون یک دایره رنگارنگ قرار داده شده که به طرفین حرکت میکنه و اثری رو از خودش میزاره و بعد از مدتی پاک میشه.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره.

موضوع 3 : المنتها و کار با DOM

مورد 39 : تغییر متن یک المنت

اگر بخوایم در jQuery به فرزندهای درون یک المنت دسترسی داشته باشیم و فیلتر برای اونا بزاریم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد siblings میتونیم این مورد رو انجام بدیم. این متد یک ورودی رو بصورت دلخواه دریافت کرده که فیلتر مورد نظرتون رو در اون قرار میدین.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که در Javascript به راحتی میتونین این کار رو انجام بدین. با استفاده از کد بالا میتونین به هدف مورد نظر دسترسی پیدا کنید.

برای IE9 به بالا:

میبینید که در مرورگر ie9 به بالا راحتتر میتونین به این مورد دسترسی پیدا کنید.

مورد 40 : انجام toggle class

اگر بخوایم در jQuery کلاس معینی رو اضافه و حذف کنید، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد toggleClass میتونیم کلاس className مورد نظرتون رو قرار بدین.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که در Javascript میتونین معادل کار مورد نظر رو انجام بدین.

برای IE9 به بالا:

برای IE10 به بالا:

برای IE10 به بالا میتونین به راحتی و با استفاده از متد classList این کار رو انجام بدیم.

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق و سربلند باشید.

یا علی

Source

- - , .

در این قسمت میخوام یک کد ( Fruit Animation ) جالب رو در اختیارتون بزارم.

همونطور که دیدین که بصورت انیمیشنی و با استفاده از دایره های متفاوت شکل سیب رو درست میکنه و این چرخه پشت سر هم انجام میشه.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون مجموعه ای از منابع رایگان قرار داده شده که توسط طراحان Facebook ساخته شده و قرار داده شده و میتونین از اونا استفاده کنید.

برای شروع وارد سایت design بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون آموزش داده شده که چطور منوی چند سطحی زیبا درست کنید. از این منو میتونین برای زیباتر شدن سایتتون استفاده کنید.

برای شروع وارد سایت multi-level-accordion بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون کتابخانه Sass برای ساخت انیمیشنهای قابل انعطاف قرار گرفته و میتونین از اون برای زیباتر شدن سایتتون استفاده کنید. این ابزار توسط Zurb تهیه و منتشر شده است.

برای شروع وارد سایت motion-ui بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

body {

background-color: #415c71;

color: #fefef8;

text-align: center;

padding-top: 80px;

}

/* Default custom select styles */

div.cs-select {

display: inline-block;

vertical-align: middle;

position: relative;

text-align: left;

background: #fff;

z-index: 100;

width: 100%;

max-width: 500px;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

div.cs-select:focus {

outline: none; /* For better accessibility add a style for this in your skin */

}

.cs-select select {

display: none;

}

.cs-select span {

display: block;

position: relative;

cursor: pointer;

padding: 1em;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/* Placeholder and selected option */

.cs-select > span {

padding-right: 3em;

}

.cs-select > span::after,

.cs-select .cs-selected span::after {

speak: none;

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.cs-select > span::after {

content: '25BE';

right: 1em;

}

.cs-select .cs-selected span::after {

content: '2713';

margin-left: 1em;

}

.cs-select.cs-active > span::after {

-webkit-transform: translateY(-50%) rotate(180deg);

transform: translateY(-50%) rotate(180deg);

}

/* Options */

.cs-select .cs-options {

position: absolute;

overflow: hidden;

width: 100%;

background: #fff;

visibility: hidden;

}

.cs-select.cs-active .cs-options {

visibility: visible;

}

.cs-select ul {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.cs-select ul span {

padding: 1em;

}

.cs-select ul li.cs-focus span {

background-color: #ddd;

}

/* Optgroup and optgroup label */

.cs-select li.cs-optgroup ul {

padding-left: 1em;

}

.cs-select li.cs-optgroup > span {

cursor: default;

}

/* cs-skin-border */

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot?-rdnm34');

src:url('fonts/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),

url('fonts/icomoon.woff?-rdnm34') format('woff'),

url('fonts/icomoon.ttf?-rdnm34') format('truetype'),

url('fonts/icomoon.svg?-rdnm34#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

div.cs-skin-circular {

background: transparent;

font-size: 2em;

font-weight: 700;

width: auto;

margin-top: 3em;

}

.cs-skin-circular > span {

background: transparent;

width: 100px;

height: 100px;

text-align: center;

padding: 0;

text-indent: 100%;

box-shadow: inset 0 0 0 5px #fefef8;

border-radius: 50%;

-webkit-transition: -webkit-transform 0.2s ease-out;

transition: transform 0.2s ease-out;

}

@media screen and (max-width: 30em) {

.cs-skin-circular > span { width: 80px; height: 80px; }

}

.cs-skin-circular > span::after {

font-family: 'icomoon';

content: 'e00f';

right: 0;

width: 100%;

text-indent: 0;

}

.cs-skin-circular.cs-active > span::after {

-webkit-transform: translate3d(0,-50%,0);

transform: translate3d(0,-50%,0);

}

.cs-skin-circular > span[style]::after {

content:'';

}

.cs-skin-circular .cs-selected span::after {

content: '';

}

.cs-skin-circular.cs-active > span {

-webkit-transform: scale3d(0.75,0.75,1);

transform: scale3d(0.75,0.75,1);

}

.cs-skin-circular .cs-options {

width: 100%;

height: 100%;

top: 0;

color: #415c71;

background: transparent;

overflow: visible;

font-size: 50%;

opacity: 0;

pointer-events: none;

-webkit-transition: opacity 0.3s, visibility 0s 0.3s;

transition: opacity 0.3s, visibility 0s 0.3s;

}

.cs-skin-circular.cs-active .cs-options {

opacity: 1;

-webkit-transition: opacity 0.3s;

transition: opacity 0.3s;

}

.cs-skin-circular .cs-options ul,

.cs-skin-circular .cs-options li {

position: absolute;

width: 100%;

height: 100%;

}

.cs-skin-circular .cs-options li {

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

border-radius: 50%;

opacity: 0;

cursor: pointer;

pointer-events: auto;

background-repeat: no-repeat;

background-position: 50% 50%;

-webkit-transition: -webkit-transform 0.3s, opacity 0.1s;

transition: transform 0.3s, opacity 0.1s;

}

.cs-skin-circular.cs-active .cs-options li {

opacity: 1;

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

transition: transform 0.3s, opacity 0.3s;

}

.cs-skin-circular.cs-active .cs-options li:hover {

opacity: 0.7;

}

.cs-skin-circular .cs-options li:first-child { background-image: url(img/1.png); }

.cs-skin-circular .cs-options li:nth-child(2) { background-image: url(img/2.png); }

.cs-skin-circular .cs-options li:nth-child(3) { background-image: url(img/3.png); }

.cs-skin-circular .cs-options li:nth-child(4) { background-image: url(img/4.png); }

.cs-skin-circular .cs-options li:nth-child(5) { background-image: url(img/5.png); }

.cs-skin-circular .cs-options li:nth-child(6) { background-image: url(img/6.png); }

.cs-skin-circular .cs-options li:nth-child(7) { background-image: url(img/7.png); }

.cs-skin-circular .cs-options li:nth-child(8) { background-image: url(img/8.png); }

.cs-skin-circular.cs-active .cs-options li:first-child {

-webkit-transform: translate3d(0, -160px, 0);

transform: translate3d(0, -160px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(2) {

-webkit-transform: translate3d(113.14px, -113.14px, 0);

transform: translate3d(113.14px, -113.14px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(3) {

-webkit-transform: translate3d(160px, 0, 0);

transform: translate3d(160px, 0, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(4) {

-webkit-transform: translate3d(113.14px, 113.14px, 0);

transform: translate3d(113.14px, 113.14px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(5) {

-webkit-transform: translate3d(0, 160px, 0);

transform: translate3d(0, 160px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(6) {

-webkit-transform: translate3d(-113.14px, 113.14px, 0);

transform: translate3d(-113.14px, 113.14px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(7) {

-webkit-transform: translate3d(-160px, 0, 0);

transform: translate3d(-160px, 0, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(8) {

-webkit-transform: translate3d(-113.14px, -113.14px, 0);

transform: translate3d(-113.14px, -113.14px, 0);

}

.cs-skin-circular .cs-options li span {

display: none;

}

.cs-skin-circular .cs-options li.cs-focus {

background-color: transparent;

opacity: 0.7;

}

- - , .

به نام خدا و سلام. در جلسه 56 ام از دوره مجازی آموزش طراحی قالب حرفه ای وردپرس در خدمت شما هستیم. در این جلسه با هم ایجاد سیستم import و export کردن تنظیمات option panel که در قسمت های قبل ایجاد کردیم را آموزش خواهیم داد و پیاده سازی خواهیم کرد. در ابتدای کار نحوه ذخیره داده ها و فرمت مورد را مشخص و سپس داده ها option panel را در فایل با فرمت json ذخیره خواهیم کرد و سپس در همان فایل را به صورت داده های ورودی در سیستم پنل تنظیمات import خواهیم کرد. در این جلسه خواهیم دید :

• پیاده سازی آپلودر وردپرس برای بخش اسلایدر ها
• پیاده سازی تگ های select در بخش option panel
• پیاده سازی import و export برای option panel

توضیحات : بعد از درخواست های فراوان دوستان برای برگزاری دوره آموزش طراحی قالب وردپرس به صورت حرفه ای و تلاش سون لرن برای انجام مقدمات برگزاری دوره بالاخره انتظار ها به پایان رسید.در این دوره یک قالب حرفه ای و مردن با افکت های زیبا را به همراه کد نویسی بهینه و هم چنین امکانات متعدد یک وب سایت دانلود و آموزش را با هم پیاده سازی خواهیم کرد.برای راحتی کار دوره به سه بخش کلی تقسیم شده که بخش اول طراحی قالب در فتوشاپ - بخش دوم تبدیل قالب طراحی شده به HTML و CSS و بخش سوم هم پیاده سازی قالب با امکانات حرفه ای در وردپرس هست.چنانچه قبلا در دوره های دیگر سون لرن شرکت کرده اید این دوره علاوه بر آموزش کامل وردپرس تمرینی بسیار حرفه ای برای شما خواهد بود و هم اکنون با محتوایی غنی تر و حرفه ای تر و قیمتی بسیار کمتر از آن چه در دوره های حضوری وجود دارد می توانید در آن ثبت نام کنید !

- - , .

در این مطلب میخوام سایتی رو بهتون معرفی کنم که طراحی بسیار زیبایی داره و میتونین از اون ایده بگیرید. برای دیدن زیبایی های این سایت به سمت پایین اسکرول کنید.

برای شروع وارد سایت trymore-inc بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

در این قسمت میخوام یک کد ( Google Chrome Logo ) جالب رو در اختیارتون بزارم.

همونطور که دیدین لوگوی مرورگر کروم با استفاده از CSS ساخته شده و قرار داده شده.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .